<template>
  <div id="customers">
    <div class="card">
      <div class="card-header bg-info text-white">
        待处理客户
        <small class="text-muted">已通过企业微信注册，但未生成客户资料</small>
      </div>
    </div>
    <table class="table table-striped table-sm small">
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>企业微信ID</th>
          <th class="text-end"></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(info, index) in dataList">
          <td>{{ info.id }}</td>
          <td>{{ info.name }}</td>
          <td>{{ info.wwCorpId }}</td>
          <td class="text-end">
            <button type="button" @click.stop="generateNewCustomer(info.id)">
              生成客户资料
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import {
  searchTodoCustomer,
  generateCustomerByEnterpriseId,
} from "@/api/customer.js";

export default {
  name: "TodoCustomer",
  data() {
    return {
      dataList: [],
    };
  },
  mounted: function () {
    this.search();
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (msg) {
      this.$store.dispatch("showLoading", { loadingText: msg });
    },
    hideLoading: function () {
      this.$store.dispatch("hideLoading");
    },
    search: function () {
      searchTodoCustomer((v) => {
        this.dataList = v;
      });
    },
    generateNewCustomer: function (id) {
      this.showLoading("处理中");
      generateCustomerByEnterpriseId(
        id,
        (v) => {
          if (v.status === "OK") {
            this.showErrMsg("客户资料生成成功");
            this.$router.push("/customer/" + v.returnCode);
          }
        },
        () => {
          this.hideLoading();
        }
      );
    },
  },
};
</script>